import { useState, useEffect } from 'react';
import { 
    useHistory,
    useLocation,
    useRouteMatch,
    useParams
} from 'react-router-dom'
const PlantDetail = () => {
    const [detail, setDetail] = useState({});
    const history = useHistory();//实现js跳转
    const match = useRouteMatch();//存储动态路由的参数信息
    const location = useLocation();//存储地址栏的信息
    const data = useParams();//直接获取动态路由参数
    useEffect(()=>{
        console.log(123);
        // fetch('http://api.com/detail/'+data.id)
        //     .then(res=>res.json())
        //     .then(res=>{
        //         setDetail(res)
        //     })
        //     .catch(()=>{})
    },[data])
    const back = ()=>{
        history.goBack();
    }
    return (
        <div>
            <button onClick={back}>返回</button>
            <h1>鲜花详情-{data.id}</h1>
            <ul>
                <li>名字: {detail.name}</li>
            </ul>
        </div>
    )
}

export default PlantDetail